<template lang="pug">
  .vue__component__root(:id='_uid')
    h1 GIF 生成测试
    video#cam(autoplay="true")
    .actions
      button(@click="createGIF") 生成GIF
</template>
<script>
export default {
  methods: {
    createGIF() {
      gifshot.createGIF(
        {
          numFrames: 20, // 20 = 2秒
          numWorkers: 4,
          gifWidth: 1280,
          gifHeight: 720
        },
        function(obj) {
          if (!obj.error) {
            var image = obj.image,
              animatedImage = document.createElement("img");
            animatedImage.src = image;
            document.body.appendChild(animatedImage);
          }
        }
      );
    },
    initCam() {
      this.videoEl = document.querySelector("#cam");
      let video = this.videoEl;
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then(function(stream) {
            video.srcObject = stream;
          })
          .catch(function(err0r) {
            console.log("Something went wrong!");
          });
      }
    }
  },
  computed: {},
  props: [],
  watch: {},
  components: {},
  events: {},
  data() {
    return {
      videoEl: null
    };
  },
  mounted() {
    this.initCam();
  }
};
</script>
<style scoped>
video {
  width: 320px;
  height: 180px;
}
</style>